<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/component/common.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <title>社区服务站新增</title>
    <meta charset="utf-8">
    <!-- Bootstrap Core CSS -->
    <link href="${css}/bootstrap.min.css" rel="stylesheet"/>
    <!-- bootstrapValidator验证 -->
    <link href="${assets}/bootstrapValidator/css/bootstrapValidator.css" rel="stylesheet"/>
</head>
<body style="width: 98%">
    <form id="myForm" class="form-horizontal" method="post" >
        <input type="hidden" id="areaCode" name="areaCode" value="" />
        <input type="hidden" id="hosType" name="hosType" value="1" /><!--医院类别-->
        <input type="hidden" id="hosLevel" name="hosLevel" value="0" /><!--医院等级-->
        <div class="form-group">
            <label for="largeArea" class="col-sm-2 control-label">地区</label>
            <div class="col-sm-3">
                <select id="largeArea" name="largeArea" class="form-control">
                    <option value="">大区</option>
                    <c:forEach items="${largeAreaList}" var="largeArea">
                        <option value="${largeArea.largeAreaCode}">${largeArea.largeAreaName}</option>
                    </c:forEach>
                </select>
            </div>
            <div class="col-sm-3">
                <select id="provinceArea" name="provinceArea" class="form-control">
                    <option value="">省</option>
                </select>
            </div>
            <div class="col-sm-4">
                <select id="cityArea" name="cityArea" class="form-control">
                    <option value="">市</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label for="countyArea" class="col-sm-2 control-label"></label>
            <div class="col-sm-3">
                <select id="countyArea" class="form-control">
                    <option value="">县</option>
                </select>
            </div>
            <div class="col-sm-3">
                <select id="townArea" class="form-control">
                    <option value="">镇</option>
                </select>
            </div>
            <div class="col-sm-4">
                <select id="villageArea" class="form-control">
                    <option value="">村</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label for="superiorHospId" class="col-sm-2 control-label">所属医院</label>
            <div class="col-sm-8">
                <select id="superiorHospId" name="superiorHospId" class="form-control">
                    <option value="">请选择...</option>
                </select>
            </div>
            <div class="col-sm-2">
                <button id="query" type="button" class="btn btn-outline btn-success" style="float:right;">查询</button>
            </div>
        </div>
        <div class="form-group">
            <label for="hospName" class="col-sm-2 control-label">医院名称</label>

            <div class="col-sm-10">
                <input type="text" class="form-control" id="hospName" name="hospName"
                       placeholder="请输入医院名称">
            </div>
        </div>
        <div class="form-group">
            <label for="hospShortName" class="col-sm-2 control-label">医院简称</label>

            <div class="col-sm-10">
                <input type="text" class="form-control" id="hospShortName" name="hospShortName"
                       placeholder="请输入医院简称">
            </div>
        </div>
        <div class="form-group">
            <label for="hospAddress" class="col-sm-2 control-label">医院地址</label>

            <div class="col-sm-10">
                <input type="text" class="form-control" id="hospAddress" name="hospAddress"
                       placeholder="请输入医院地址">
            </div>
        </div>
        <div class="form-group">
            <label for="contactPhone" class="col-sm-2 control-label">联系电话</label>

            <div class="col-sm-10">
                <input type="text" class="form-control" id="contactPhone" name="contactPhone"
                       placeholder="请输入联系电话">
            </div>
        </div>
        <div class="form-group">
            <label for="contacts" class="col-sm-2 control-label">医院联系人</label>

            <div class="col-sm-10">
                <input type="text" class="form-control" id="contacts" name="contacts"
                       placeholder="请输入医院联系人">
            </div>
        </div>
        <div class="form-group" id="departmentsDiv">
            <label class="col-sm-2 control-label">科室</label>
            <label class="col-sm-10">
                <c:forEach items="${departmentList}" var="department">
                    <label class="col-sm-4">
                        <label class="checkbox-inline">
                            <input type="checkbox" name="depId" value="${department.id}"> <input class="form-control col-sm-2" disabled="disabled" name="showName" value="${department.depName}">
                        </label>
                    </label>
                </c:forEach>
            </label>
        </div>
        <div class="modal-footer" style="text-align: center ">
            <button type="button" class="btn btn-default" data-dismiss="modal" id="closeModalButt">关闭</button>
            <button type="submit" class="btn btn-primary">保存</button>
        </div>
    </form>

    <!-- jQuery -->
    <script src="${js}/jquery-1.9.1.min.js"></script>
    <!-- Bootstrap Core JavaScript -->
    <script src="${js}/bootstrap.min.js"></script>

    <script src="${js}/bootbox.js"></script>
    <!-- bootstrapValidator验证 -->
    <script src="${assets}/bootstrapValidator/js/bootstrapValidator.js"></script>
    <!-- bootstrapValidator验证 国际化中文 -->
    <script src="${assets}/bootstrapValidator/js/language/zh_CN.js"></script>

    <script type="text/javascript">
        $(function () {
            $("#largeArea").change(function() {
                if(this.value==null || this.value==""){
                    resetArea(0);
                }else{
                    getLowerAreaList("provinceArea",this.value,0);
                    resetArea(1);
                }
            });
            $("#provinceArea").change(function() {
                if(this.value==null || this.value==""){
                    resetArea(1);
                }else{
                    getLowerAreaList("cityArea",this.value,1);
                    resetArea(2);
                }
            });
            $("#cityArea").change(function() {
                if(this.value==null || this.value==""){
                    resetArea(2);
                }else{
                    getLowerAreaList("countyArea",this.value,2);
                    resetArea(3);
                }
            });
            $("#countyArea").change(function() {
                if(this.value==null || this.value==""){
                    resetArea(3);
                }else{
                    getLowerAreaList("townArea",this.value,3);
                    resetArea(4);
                }
            });
            $("#townArea").change(function() {
                if(this.value==null || this.value==""){
                    resetArea(4);
                }else{
                    getLowerAreaList("villageArea",this.value,4);
                    resetArea(5);
                }
            });

            /**
             * 后台获取下级列表
             * */
            function getLowerAreaList(id,code,level){
                $.ajax({
                    url:'${ctx}/area/getLowerAreaList',
                    type:'post',
                    data:'code='+code+"&level="+level,
                    async : false, //默认为true 异步
                    error:function(){
                        alert('error');
                    },
                    success:function(data){
                        var objs = document.getElementById(id);
                        objs.options.length = 1;
                        var area = data;
                        for(var i=0;i<area.length;i++){
                            var childOption = document.createElement("option");
                            childOption.value = area[i].code;
                            childOption.innerHTML = area[i].name;
                            objs.appendChild(childOption);
                        }
                    }
                });
            }

            /**
             * 点击科室多选框时，设置后面的科室别名输入框  是否有效
             * */
            $("input[name='depId']").change(function(){
                var checkBox= this;
                if(this.checked == true){
                    setCheckBoxInputDisabled(checkBox,false);
                }else{
                    setCheckBoxInputDisabled(checkBox,true);
                }
            });

            $('#myForm').bootstrapValidator({
                message: 'This value is not valid',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    hospName: {
                        group: '.col-sm-10',
                        validators: {
                            notEmpty: true
                        }
                    },
                    largeArea: {
                        group: '.col-sm-3',
                        validators: {
                            notEmpty: true
                        }
                    },
                    provinceArea: {
                        group: '.col-sm-3',
                        validators: {
                            notEmpty: true
                        }
                    },
                    cityArea: {
                        group: '.col-sm-4',
                        validators: {
                            notEmpty: true
                        }
                    },
//                    superiorHospId: {
//                        group: '.col-sm-8',
//                        validators: {
//                            notEmpty: true
//                        }
//                    }
                }
            }).on('success.form.bv', function (e) {
                e.preventDefault();
                //设置最低等级地区的code为areaCode
                $("#areaCode").val(getDetailAreaCode());
                $.ajax({
                    url:'${URL_ADM_COMMUNITY_ADD}',
                    type:'post',
                    data:$('#myForm').serialize(),
                    async : false, //默认为true 异步
                    error:function(){
                        alert('error');
                    },
                    success:function(data){
                        window.parent.closeModal("add");
                    }
                });
            });

            //关闭弹出框
            $("#closeModalButt").on("click",function(){
                window.parent.simpleCloseModal("add");
            });

        });

        /**
         * 设置科室多选框后面的科室别名输入框  是否有效
         * checkBox：多选框
         * disabledFlag：是否有效标记  true：失效，false：有效
         * */
        function setCheckBoxInputDisabled(checkBox,disabledFlag){
            var i = 0;//科室checkBox的排列索引
            var j = 0;//科室checkBox后面的输入框的排列索引
            $("input[name='depId']").each(function(){
                i++;
                if($(this)[0]==checkBox){
                    return false;
                }
            });
            $("input[name='showName']").each(function(){
                j++;
                if(j==i){
                    if(disabledFlag){
                        $(this).attr("disabled","disabled");
                    }else{
                        $(this).removeAttr("disabled");
                    }
                    return false;
                }
            });
        }

        /**
         * 重置下级菜单
         * */
        function resetArea(level){
            if(level<1){
                var provinceArea = document.getElementById("provinceArea");
                provinceArea.options.length = 1;
            }
            if(level<2){
                var cityArea = document.getElementById("cityArea");
                cityArea.options.length = 1;
            }
            if(level<3){
                var countyArea = document.getElementById("countyArea");
                countyArea.options.length = 1;
            }
            if(level<4){
                var townArea = document.getElementById("townArea");
                townArea.options.length = 1;
            }
            if(level<5){
                var villageArea = document.getElementById("villageArea");
                villageArea.options.length = 1;
            }
        }

        /**
         * 后台获取医院列表
         * */
        $("#query").click(function(){
            if($("#cityArea").val()==null||$("#cityArea").val()==""){
                top.bootbox.dialog({
                    message: "至少设置到市级,再进行查询",
                    buttons: {
                        OK: {
                            label: "确定",
                            className: "btn-primary"
                        }
                    }
                });
                return false;
            }
            var areaCode = getDetailAreaCode();
            $.ajax({
                url:'${ctx}/community/getHospitalListByAreaCode',
                type:'post',
                data:{areaCode:areaCode},
                async : false, //默认为true 异步
                error:function(){
                    top.bootbox.dialog({
                        message: "获取失败",
                        buttons: {
                            OK: {
                                label: "确定",
                                className: "btn-primary"
                            }
                        }
                    });
                },
                success:function(data){
                    var objs = document.getElementById("superiorHospId");
                    objs.options.length = 1;
                    for(var i=0;i<data.data.length;i++){
                        var childOption = document.createElement("option");
                        childOption.value = data.data[i].id;
                        childOption.innerHTML = data.data[i].hospName;
                        objs.appendChild(childOption);
                    }
                    top.bootbox.dialog({
                        message: "获取成功",
                        buttons: {
                            OK: {
                                label: "确定",
                                className: "btn-primary"
                            }
                        }
                    });
                }
            });
        });

        /**
         * 获取最详细的地区code
         * */
        function getDetailAreaCode(){
            //设置最低等级地区的code为areaCode
            var villageArea = $("#villageArea").val();//村code
            var townArea = $("#townArea").val();//镇code
            var countyArea = $("#countyArea").val();//县code
            var cityArea = $("#cityArea").val();//市code
            var provinceArea = $("#provinceArea").val();//省code
            var largeArea = $("#largeArea").val();//大区code
            if(villageArea!=null && villageArea!=""){
                return villageArea;
            }else if(townArea!=null && townArea!=""){
                return townArea;
            }else if(countyArea!=null && countyArea!=""){
                return countyArea;
            }else if(cityArea!=null && cityArea!=""){
                return cityArea;
            }else if(provinceArea!=null && provinceArea!=""){
                return provinceArea;
            }else if(largeArea!=null && largeArea!=""){
                return largeArea;
            }
        }

        <%--function doAdd(){--%>
            <%--if($("#cityArea").val()==null||$("#cityArea").val()==""){--%>
                <%--top.bootbox.dialog({--%>
                    <%--message: "至少设置到市级",--%>
                    <%--buttons: {--%>
                        <%--OK: {--%>
                            <%--label: "确定",--%>
                            <%--className: "btn-primary"--%>
                        <%--}--%>
                    <%--}--%>
                <%--});--%>
                <%--return false;--%>
            <%--}--%>
            <%--//设置最低等级地区的code为areaCode--%>
            <%--$("#areaCode").val(getDetailAreaCode());--%>
            <%--$.ajax({--%>
                <%--url:'${URL_ADM_COMMUNITY_ADD}',--%>
                <%--type:'post',--%>
                <%--data:$('#myForm').serialize(),--%>
                <%--async : false, //默认为true 异步--%>
                <%--error:function(){--%>
                    <%--alert('error');--%>
                <%--},--%>
                <%--success:function(data){--%>
                    <%--window.parent.closeModal("add");--%>
                <%--}--%>
            <%--});--%>
        <%--}--%>

    </script>
</body>
</html>